<template>
  <view class="settle">
    <image
      src="../../static/image/business/img_agent_add_3.png"
      mode="widthFix"
      class="settle__top"
    ></image>
    <view class="settle__tip">进行费率和返现成本配置，并决定是否开启代付</view>
    <u-cell-group>
      <u-cell-item title="交易分润代付开关" :arrow="false">
        <u-switch slot="right-icon" v-model="tradeBenefitCheck"></u-switch>
      </u-cell-item>
      <u-cell-item title="笔数分润代付开关" :arrow="false">
        <u-switch slot="right-icon" v-model="numBenefitCheck"></u-switch>
      </u-cell-item>
      <u-cell-item title="返现分润代付开关" :arrow="false">
        <u-switch slot="right-icon" v-model="returnCheck"></u-switch>
      </u-cell-item>
    </u-cell-group>
    <u-button
      class="m-20"
      type="primary"
      :custom-style="customStyle"
      @click="submit()"
      >下一步</u-button
    >
    <u-modal
      v-model="showModel"
      title="入网成功"
      confirm-text="确定"
      cancel-text="确定"
      confirm-color="#9D60FF"
      @cancel="closeModel()"
      @confirm="configureAgent()"
    >
      <view class="slot-content">
        <view class="mt-20"> 代理商账户账号：{{ agentInfo.loginPhone }} </view>
        <view class="u-m-t-10"> 初始密码：{{ agentInfo.password }} </view>
        <view class="u-m-t-10 mb-20">
          {{ agentInfo.tip }}
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      customStyle: {
        // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        backgroundColor: '#9D60FF',
      },
      tradeBenefitCheck: true,
      numBenefitCheck: true,
      returnCheck: true,
      params: {
        baseInfo: {},
        setterInfo: {},
        costConfig: {},
        userType: '1',
      },
      costInfo: {
        cashbackSwitch: '1',
        profitSwitch: '1',
        settleProfitSwitch: '1',
        taxPoint: '0',
      },
      basicForm: {},
      settleForm: {},
      showModel: false,
      agentInfo: {},
    };
  },
  // onLoad自带一个参数
  onLoad(options) {
    console.log('options----->77', options);
    this.basicForm = JSON.parse(options.basicForm);
    this.settleForm = JSON.parse(options.settleForm);
    this.params.baseInfo = this.basicForm;
    this.params.setterInfo = this.settleForm;

    // this.basicForm = JSON.parse( decodeURIComponent(this.$route.query.basicForm) );
    // this.settleForm = JSON.parse( decodeURIComponent(this.$route.query.settleForm) );
  },
  methods: {
    closeModel() {
      this.showModel = false;
    },
    configureAgent() {
      this.showModel = false;
      uni.navigateBack({
        delta: 3,
      });
      // this.$u.route({
      // 	url: 'pages/business/agentConfigure'
      // })
    },
    submit() {
      const _that = this;
      _that.costInfo.settleProfitSwitch = _that.numBenefitCheck ? '1' : '0';
      _that.costInfo.profitSwitch = _that.returnCheck ? '1' : '0';
      _that.costInfo.cashbackSwitch = _that.tradeBenefitCheck ? '1' : '0';
      _that.params.costConfig = _that.costInfo;
      console.log('_that.params----->117', _that.params);
      this.$zx.user_api.saveAgent(this.params).then((data) => {
        console.log('saveAgent----->119', data);
        _that.showModel = true;
        this.agentInfo = data;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.settle {
  &__top {
    width: 100%;
  }

  &__tip {
    background-color: #f6f6f6;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 20rpx;
    font-size: 12px;
  }

  &__form {
    background-color: white;
  }

  &__upload {
    background-color: white;
    padding: 20rpx;
  }
}

.tip {
  text-align: center;
}

.slot-content {
  padding: 20rpx;
  font-size: 14px;
}
</style>
